<template>
  <div class="charts-container">
    <div class="chart-container chart2-container">
      <div class="container">
        <div class="title">
          <span class="title-text">故障系统分布&nbsp;</span>
        </div>
        <div class="table-list">
          <div class="tr th-item">
            <div class="td" style="width: 30px;">序号</div>
            <div class="td" style="width: 80px;">日期</div>
            <div class="td" style="width: 160px;">位置</div>
            <div class="td" >故障现象</div>
          </div>
          <div v-for="(i, index) in state.listFault" :key="i.id"
            :class="['th-item', index % 2 === 0 ? 'th-item1' : 'th-item2']" @click="handlesFault(i)">
            <div class="td" style="width: 30px;">{{ index + 1 }}</div>
            <div class="td" style="width: 80px;">{{ i.time }}</div>
            <div class="td"  style="width: 160px;" :title="i.address">{{ i.address }}</div>
            <div class="td" :title="i.FaultDesc">{{ i.FaultDesc }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-container chart3-container">
      <div class="container">
        <div class="title">
          <span class="title-text">当日计划&nbsp;</span>
        </div>
        <div class="table-list">
          <div class="tr th-item">
            <div class="td td2">施工名称</div>
            <div class="td td3">施工区域</div>
            <div class="td" style="width: 80px;">施工单位</div>
          </div>
          <div v-for="(i, index) in state.listPlan" :key="i.id"
            :class="['th-item', index % 2 === 0 ? 'th-item1' : 'th-item2']" @click="handleOpenCarModal(i)">
            <div class="td td2" :title="i.WorkName">{{ i.WorkName }}</div>
            <div class="td td3" :title="i.Workaddress">{{ i.Workaddress }}</div>
            <div class="td" style="width: 80px;" :title="i.WorkDept.Deptname">{{ i.WorkDept.Deptname }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-container chart3-container">

      <div class="container">
        <div class="title">
          <span class="title-text">本月计划完成情况&nbsp;</span>
        </div>
        <CommonChart class="chat-content" :option="state.option3" />
      </div>
    </div>
    <InfoModal :visible="isInfoModalVisible" :data="modalData" :width="state.ModelWidth" :title="state.title"
      @update:visible="isInfoModalVisible = $event" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import CommonChart from '/@/components/CommonChart/CommonChart.vue'
import { alovaInstance } from "/@/utils/request.js";
import { convertDateString } from "/@/utils/tool.js";
import InfoModal from './InfoModal.vue';

let timer = null
const emit = defineEmits(['openAlarmPanel'])

const state = reactive({
  listPlan: [],
  listFault: [],
  vehicleStatusList: [],
  chartData: {},
  option3: {},
  title: '',
  actionTab: '1',
  ModelWidth: 800
})
const isInfoModalVisible = ref(false);
const modalData = ref([]);

onMounted(() => {
  state.listPlan = []
  state.listFault = []
  getData()
  startTimer()
})
watch([() => state.chartData,], (newValue, oldValue) => {
  // 这里可以添加在数据变化时
  if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
    console.log('chartData 数据已更新，表格将刷新');
    state.option3 = state.chartData
  }
}, { deep: true })

// 故障处理情况分布
const getCountFaultHandleFb = async () => {
  const colors = ['#FAA03F', '#B3C8F0', '#189CFE', '#894EFE']
  const res = await alovaInstance.Get('/Portal/TYHome.ashx?Method=GetMonthPlanPie')
  if (res && res.data && res.data.length) {
    const pieData = res.data.map((item, index) => {
      return {
        name: item.flag,
        value: item.count,
        color: colors[index]
      };
    });
    state.chartData = getPieOption(pieData, {
      labelLine: {
        show: false
      },
      label: {
        show: false
      },
    })
  } else {
    state.chartData = getPieOption([])
  }
}

const getPieOption = (data, opt) => {
  const legendData = data.map((i, index) => {
    return {
      name: i.name,
      itemStyle: {
        color: i.color || state.colors[index] || '#00BFFF',
      },
    };
  });
  const seriesData = data.map((i, index) => {
    return {
      name: i.name,
      value: i.value,
      itemStyle: {
        color: i.color || state.colors[index] || '#00BFFF',
      },
    };
  });
  return {
    tooltip: {
      trigger: "item",
      confine: true,
    },
    legend: {
      type: "scroll",
      bottom: "1%",
      left: "center",
      itemWidth: 14,
      itemGap: 18,
      textStyle: {
        color: "#A3A7B1",
        lineHeight: 1,
      },
      data: legendData,
      pageTextStyle: {
        color: "#A3A7B1",
      },
    },
    series: [
      {
        name: "本月计划完成情况",
        type: "pie",
        radius: ["40%", "55%"],
        center: ["50%", "45%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          // formatter: "{b}: {d}%",
          overflow: 'truncate',
          formatter: (p) => {
            return `${p.name}(${p.value}个)\n${p.percent}%`
          },
          color: "#fff",
          position: 'outside'
        },
        labelLine: {
          show: true,
          lineStyle: {
            color: "#0ed2e8",
          },
        },
        data: seriesData,
      },
      {
        name: "外层环",
        type: "pie",
        radius: ["65%", "67%"],
        center: ["50%", "45%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 100,
            name: "外层环",
            tooltip: {
              show: false,
            },
          },
        ],
        itemStyle: {
          color: "#17325D",
        },
      },
    ],
  };
}

onUnmounted(() => {
  clearTimer()
})

const getData = () => {
  getlistPlanTop()
  getListFaultTop()
  getCountFaultHandleFb()
}

const getlistPlanTop = async () => {
  const res = await alovaInstance.Get('/Portal/TYHome.ashx?Method=GetTodayDayPlan')
  if (res && res.data && res.data.length > 0) {
    state.listPlan = res.data
  }
}

const getListFaultTop = async () => {
  const res = await alovaInstance.Get('/Portal/TYHome.ashx?Method=GetHandleFaultList')
  if (res && res.data && res.data.length > 0) {
    state.listFault = res.data.map((i) => {
      return {
        time: convertDateString(i.FaultTime),
        address: i.Site ? `${i.Site.Sitename}(${i.PillarCode})` : i.Substation.Substationname,
        ...i
      }
    })

  }
}


const handlesFault = (item) => {
  modalData.value = [
    { title: '故障信息', value: '',full:true,},
    { label: '位置', value: item.address },
    { label: '故障代码', value: item.FaultCode },
    { label: '报告人单位', value: item.Dept.Deptname },
    { label: '报告人', value: item.Reporer },
    { label: '故障时间', value: convertDateString(item.FaultTime) },
    { label: '故障现象', value: item.FaultDesc },
    { label: '故障类型', value: item.FaultType },
    { title: '处理信息', value: '',full:true,},
    { label: '接报人', value: item.Dutyer },
    { label: '责任分中心', value: item.OnusDeptName },
    { label: '专业', value: item.Major=='JCW'?'接触网':'变电' },
    { label: '受理人(单位)', value: item.Resvicer },
    { label: '到场时间', value: convertDateString(item.ArriveTime,'time') },
    { label: '故障原因', value: item.Reason },
    { label: '处理措施', value: item.Measure },
    { label: '物资消耗', value: item.MateralSource },
    { label: '修复时间', value: convertDateString(item.RepairTime,'time') },
    { label: '注销时间', value: convertDateString(item.RecoveryTime,'time') },
    { label: '注销人', value: item.Handler },
    { label: '响应时间', value: convertDateString(item.ResponseTime,'time') },
    { label: '备注', value: item.Memo,full:true },
    
  ];
  state.ModelWidth = 700
  isInfoModalVisible.value = true;
  state.title = '故障系统分布详情'
}

const handleOpenCarModal = (item) => {
  modalData.value = [
    { label: '施工名称', value: item.WorkName },
    { label: '施工序号', value: item.Workcode },
    { label: '施工单位', value: item.WorkDept.Deptname },
    { label: '申请时间', value: item.ApplyTime },
    { label: '施工人数', value: item.WorkerCount },
    { label: '施工负责人及联系方式', value: item.Contactway },
    { label: '施工区域', value: item.Workaddress, full: true },
    { label: '大型工器具及安全防护用品', value: item.Measure, full: true },
    { label: '接触网停送电、封装置封挂地线', value: item.SubstationArrange, full: true },
    { label: '备注', value: item.Memo, full: true },
  ];
  state.ModelWidth = 800
  isInfoModalVisible.value = true;
  state.title = '今日计划详情'
};



const clearTimer = () => {
  if (timer) {
    clearInterval(timer)
  }
  timer = null
}

const startTimer = () => {
  clearTimer()
  timer = setInterval(() => {
    getData()
  }, 30000);
}
</script>
<style scoped lang="less">
.charts-container {
  width: 24%;
  height: 89vh;
  position: absolute;
  right: 10px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 500;
  overflow: hidden;
  background-size: 100% 100%;
  padding: 24px 0;
  border-radius: 10px;

  .chart1-container {
    height: 24% !important;
  }

  .chart-container {
    height: 30vh;
    min-height: 30vh;

    .title {
      height: 34px;
      color: #fff;
      font-weight: 700;
      font-size: 16px;
      padding-left: 12px;
      background: url('@/assets/home/title-bg.png') no-repeat;
      background-size: 100% 100%;
      padding-left: 44px;
      line-height: 30px;
      margin-bottom: 12px;
      font-style: italic;
      display: flex;
      justify-content: space-between;

      .title-text {
        background: linear-gradient(to bottom, #afe5ff, #f5fcff);
        -webkit-background-clip: text;
        color: transparent;
      }

      ::v-deep(.ant-radio-button-wrapper) {
        height: 29px !important;
        line-height: 28px;
      }
    }


    .container {
      background: linear-gradient(to left, rgba(14, 38, 100, 1), rgba(14, 38, 100, 0.7));
      height: calc(100% - 10px);
      border-radius: 10px;
      color: #f0f1f3;
      font-size: 14px;
      z-index: 99;

      .chat-content {
        height: calc(100% - 40px) !important;
        padding-bottom: 40px;
      }

      .table-list {
        padding: 0 12px;
        width: 100%;
        height: calc(100% - 45px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #28B1FF rgba(40, 177, 255, 0.2);

        &::-webkit-scrollbar {
          width: 8px;
          background-color: rgba(15, 48, 87, 0.8);
        }

        &::-webkit-scrollbar-thumb {
          background-color: #28B1FF;
          border-radius: 4px;

          &:hover {
            background-color: #36c6ff;
          }
        }

        &::-webkit-scrollbar-track {
          background-color: rgba(40, 177, 255, 0.1);
        }

        .tr {
          color: #28B1FF !important;
        }

        .th-item {
          display: flex;
          height: 4vh;
          padding: 0 10px;
          align-items: center;
          cursor: pointer;

          .td {
            margin-right: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .td2 {
            width: 180px;
          }

          .td3 {
            width: 80px;
          }

          .td4 {
            margin-right: 0 !important;
            flex: 1;
          }
        }

        .th-item1,
        .th-item2 {
          background: url('@/assets/home/tr-bg.png') no-repeat;
          background-size: 100% 100%;

          .td2 {
            width: 180px;
            color: #fff;
          }
        }

        .th-item2 {
          margin: 10px 0;
        }

        .status1 {
          color: #ff0000
        }

        .status2 {
          color: #ffbb00
        }
      }
    }

    .container1 {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 0 !important;

      .car-items {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        height: 100%;

        .car-item {
          display: flex;
          align-items: center;
          width: 32%;
          padding: 0 12px;
          cursor: pointer;
          flex-direction: column;

          .car-info {
            font-size: 14px;
            color: #fff;
            font-style: italic;
          }

          .car-value {
            display: flex;
            align-items: center;
            justify-content: center;

            .card-num {
              width: 20px;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #123146;
              margin: 3px;
              font-size: 16px;
              font-weight: 700;
              border-radius: 4px;

              .card-num-value {
                background: linear-gradient(to bottom, #FFFFFF, #58FFFF);
                -webkit-background-clip: text;
                color: transparent;
              }
            }
          }

          .car-img {
            img {
              height: 7vh;
            }
          }
        }
      }

      .car-total {
        background: url('@/assets/home/rect1.png') no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #fff;
        font-style: italic;
      }
    }
  }
}
</style>
